
<template>
    
    <div class="tap-bar-item" @click="itemclick" >

           <slot v-if="isactive"  name="item-icon"></slot>         
            <slot v-else name="item-icon-active"></slot>
            <div :style="activeColour">
                <slot  name="item-text"></slot>                
            </div>  


    </div>
</template>

<style lang="css">

.tap-bar-item{
  display: flex;
    flex-direction: column;
    width: 100%;

}
.tap-bar-item p{
    display: block;
    margin-top: -1vw;

}
.tap-bar-item img {
    width: auto;
    height: 12vw;
    /* text-align: center; */
    margin-top: 1vw;
}
/* .active{
    color: red;
} */
</style>


<script>
export default {
    name:'TapBarItem',
    props:{
        path:String,
        actColour:{
            default:"#DC143C",
            type:String,
        }
    },
    data(){
        return{
  
        }
    },
    computed:{
        // 计算是否活跃 es6
        isactive(){
            return(this.$route.path.includes(this.path)==1)
        },
        // 计算属性
        activeColour(){
            return(this.isactive?{color:this.actColour}:{})
        }
    },
    methods:{
        itemclick(){
            // 跳转登录界面
                //  this.$router.push('/login').catch(err => { console.log(err)})

                if (this.$route.path!==this.path){
                    this.$router.push(this.path).catch(err=>{console.log(err)});
                    // isactive改变
                    // this.isactive=false
                }


                // console.log(this.$route.path)


            

        }
    }

}
</script>